I want sub menu's of a verticle menu to expand and collapse when moused over. This is what i've got so far but it goes crazy if you do it to quick as all the animations run at once and on a delay. How can i make sure just one menu expands at a time.

I've also set the current_page_item to be open but default and I don't want this to expand or collaspe.

<ul>
 <li class="current_page_item"><a href="#">Parent Item</a>
  <ul class="children">
   <li class="page_item"><a href="#">Child page</a></li>
   <li class="page_item"><a href="#">Child page</a></li>
   <li class="page_item"><a href="#">Child page</a></li>
   <li class="page_item"><a href="#">Child page</a></li>
  </ul>
 </li>
 <li class="page_item"><a href="#">Parent Item</a>
  <ul class="children">
   <li class="page_item"><a href="#">Child page</a></li>
   <li class="page_item"><a href="#">Child page</a></li>
  </ul>
 </li>
 <li class="page_item"><a href="#">Parent Item</a>
  <ul class="children">
   <li class="page_item"><a href="#">Child page</a></li>
   <li class="page_item"><a href="#">Child page</a></li>
  </ul>
 </li>
 <li class="page_item"><a href="#">Parent Item</a></li>
 <li class="page_item"><a href="#">Parent Item</a></li>
</ul>

jQuery('ul.children').hide();
jQuery('li.current_page_item ul.children').show();
jQuery('li.current_page_item').parent().show();

jQuery("li.page_item").hover(function() { 
  jQuery(this).find('ul.children').delay(300).slideDown('slow');
    }, function() {  
  jQuery(this).find('ul.children').delay(300).slideUp('slow');
});